<template>
  <div class="home">
    <van-nav-bar
      left-text="企业书吧"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 头部搜索框 -->
    <header class="head">
      <my-search></my-search>
    </header>
    <main class="main">
    <van-tabs v-model:active="active1" type="card" sticky animated offset-top="110px" v-show="showTabs1" class="tabs1" swipeable>
      
        <van-tab title="已上架图书">
          <div>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="哥，已经到底了"
            @load="onLoad"
            :offset="250"
            >
            <div v-for="item in booksArr1" style="display: flex;margin: 10px auto;">
                <div style="width: 30%;">
                  <img :src="item.img" alt="">
                </div>
                <div style="flex:1;width: 70%;font-size: 12px;">
                  <h6>我是一本书</h6>
                  <span>{{ item.title }}</span>
                </div>
              </div>
          </van-list>
          </div>
        </van-tab>
        <van-tab title="书吧推荐">
          <div>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="哥，已经到底了"
            @load="onLoad"
            :offset="250"
            >
            <div v-for="item in booksArr1" style="display: flex;margin: 10px auto;">
                <div style="width: 30%;">
                  <img :src="item.img" alt="">
                </div>
                <div style="flex:1;width: 70%;font-size: 12px;">
                  <h6>我是一本书</h6>
                  <span>{{ item.title }}</span>
                </div>
              </div>
          </van-list>
        </div>
        </van-tab>
        <van-tab title="热门借阅">
          <div>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="哥，已经到底了"
            @load="onLoad"
            :offset="250"
            >
            <div v-for="item in booksArr1" style="display: flex;margin: 10px auto;">
                <div style="width: 30%;">
                  <img :src="item.img" alt="">
                </div>
                <div style="flex:1;width: 70%;font-size: 12px;">
                  <h6>我是一本书</h6>
                  <span>{{ item.title }}</span>
                </div>
              </div>
          </van-list>
        </div>
        </van-tab>

    </van-tabs>
 
  </main>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {getGoodsListAPI} from '@/api/goodsApi'
import IBooks from "@utils/type"
import { useRouter } from "vue-router";

let $router = useRouter()

//loading 加载状态 
let loading = ref<boolean>(false);

let finished = ref<boolean>(false);

let booksArr1:Array<IBooks> = reactive<Array<IBooks>>([])

// 点更多之后的标签页
const active1 = ref(0)

let showTabs1 = ref(true)

const onLoad = ()=>{

getGoodsListAPI({
  page:1
}).then(res=>{
  console.log(res);
  if(res.code == 200){
    booksArr1.push(...res.goodList)
    finished.value = true
    loading.value = false;
  }
})
}

// 返回
function onClickLeft() {
  $router.back();
}

</script>

<style scoped lang="less">
.home{
  display: flex;
  flex-direction: column;
  height: 100%;
  width:100%;

  .head{
    height: 54px;
    background-color: #4fc08d;
  }
  .main{
    flex: 1;
    padding:0px 10px;
    overflow-y: auto;
  }
  .tabs1{
    margin: 10px 10px;
  }
}

</style>